<template>
  <view>
    <view>
      <u-form :model="form" ref="uForm" style="margin: 0 20rpx">
        <u-form-item label="*目录" prop="courseCatalogId"
          ><u-input
            v-model="courseCatalogName"
            type="select"
            @click="catalogShow = true"
        /></u-form-item>
        <u-form-item label="*标题" prop="title"
          ><u-input v-model="form.title"
        /></u-form-item>
        <u-form-item  label-width="145" label="*作答时长" prop="duration"
          ><u-input type="number" v-model="form.duration"
        /></u-form-item>
        <u-form-item label-width="145" label="*开始时间" prop="beginTime">
          <u-input
            :selectOpen="show && isBegin"
            type="select"
            placeholder="请选择"
            v-model="form.beginTime"
            @click="beginDateTime"
          />
        </u-form-item>
        <u-form-item label-width="145" label="*结束时间" prop="endTime">
          <u-input
            :selectOpen="show && !isBegin"
            type="select"
            placeholder="请选择"
            v-model="form.endTime"
            @click="endDateTime"
          />
        </u-form-item>
      </u-form>
      <view style="text-align: center; margin-top: 20rpx">
        <u-button
          size="medium"
          shape="circle"
          type="primary"
          @click="submit"
          :ripple="true"
          ripple-bg-color="#a0cfff"
          >提交</u-button
        >
      </view>
    </view>
    <u-picker
      mode="time"
      v-model="show"
      :params="params"
      @confirm="confirm"
      @cancel="show = false"
    ></u-picker>
    <u-select
      v-model="catalogShow"
      mode="single-column"
      :list="list"
      value-name="id"
      label-name="name"
      @confirm="catalogConfirm"
    ></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      show: false,
      isBegin: false,
      courseCatalogName: "",
      form: {
        courseId: "",
        courseCatalogId: "",
        title: "",
        duration: '',
        beginTime: "",
        endTime: "",
      },
      rules: {
        courseCatalogId: [
          {
            required: true,
            message: "目录不能为空",
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "标题不能为空",
            trigger: "blur",
          },
        ],
        duration: [
          {
            required: true,
            message: "作答时长不能为空",
            trigger: "blur",
          },
        ],
        beginTime: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: "blur",
          },
        ],
        endTime: [
          {
            required: true,
            message: "结束时间不能为空",
            trigger: "blur",
          },
        ],
      },
      catalogShow: false,
      list: [],
    };
  },
  async onLoad(e) {
    this.form.courseId = e.courseId;
    const res = await this.$u.api.getCatalogByCourseId(e.courseId, {pageNum: 1});
    this.list = res.data;
  },
  methods: {
    catalogConfirm(e) {
      this.form.courseCatalogId = e[0].value;
      this.courseCatalogName = e[0].label;
    },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.$u.api.saveExerciseTask(this.form).then((res) => {
            if (res.code === 200) {
              uni.$emit("exerciseTask");
              // #ifndef H5
              uni.navigateBack({
                delta: 1,
              });
              // #endif
              // #ifdef H5
              history.back();
              // #endif
            }
          });
        }
      });
    },
    confirm(v) {
      if (v !== null && v !== undefined) {
        let datetime =
          v.year +
          "-" +
          v.month +
          "-" +
          v.day +
          " " +
          v.hour +
          ":" +
          v.minute +
          ":" +
          v.second;
        if (this.isBegin) {
          this.form.beginTime = datetime;
        } else {
          this.form.endTime = datetime;
        }
      }
    },
    beginDateTime() {
      this.isBegin = true;
      this.show = true;
    },
    endDateTime() {
      this.isBegin = false;
      this.show = true;
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  filters: {},
};
</script>

<style>
</style>
